<html>
   <head>
      <script src="../../../../../../Grid/GridE.js"> </script>
      <link href="../../../../../../Styles/Examples.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
      <h2>Custom edit</h2>
         Example of TreeGrid with custom editing control.<br/>
         To show custom editing control in cell use API events <b>OnCustomStartEdit</b> and <b>OnCustomEndEdit</b><br />
         This example shows custom &lt;input> tag with dynamic menu showing predefined default value starting with entered string<br />
      <br />
      <div align="center">
      <div style="WIDTH:100%;HEIGHT:400px">
         <bdo Data_Url="CustomEdit.xml"></bdo>
      </div>
      </div>
      <script>

// --- Predefined words in the dialog ---
// In real application it will be probably server side generated by AJAX
var List = [
   "1 one","2 two","3 three","4 four","5 five","6 six","7 seven","8 eight","9 nine","10 ten","11 eleven","12 tvelve",
   "one","two","three","four","five","six","seven","eight","nine","ten","eleven","tvelve",
   "alpha","beta","gamma","delta","epsilon","zeta","eta","theta","iota","kappa","lambda",
   "mu","nu","xi","omicron","pi","rho","sigma","tau","upsilon","phi","chi","psi","omega",
   "digamma","qoppa","san","sampi","stigma","sho","heta",
   "a","bee","cee","dee","e","eff","gee","aitch","i","jay","kay","el","em","en","o","pee","cue","ar","ess","tee","u","vee","double-u","ex","wye","zed"
   ];


// --- API event called to show the custom edit control ---
Grids.OnCustomStartEdit = function(G,row,col,val,cell,width){
if(col!="Custom") return; // Only in Custom column

// --- Created the input ---
var O = document.createElement("input");
O.style.width = width;
O.style.fontSize = "12px";
O.style.padding = "0px";
O.style.paddingLeft = "3px";
O.style.paddingTop = "1px";
O.style.margin = "0px";
O.style.border = "none";
O.value = val;

// --- Places the created input as the cell content ---
cell.innerHTML = "";
cell.appendChild(O);
O.focus();
O.select();

// --- Suppresses default TreeGrid onkyedown handler and shows the menu ---
O.onkeydown = function(ev){
   if(!ev) ev = event;
   var key = ev.keyCode; if(!key) key = ev.charCode;
   if(key!=9) CancelEvent(ev,1); // Suppresses TreeGrid event handler
   if(key!=9 && key!=27 && key!=13) setTimeout(showmenu,10);
   }

// --- Suppresses default TreeGrid onkyedown handler and handles enter and esc keys to finish editing ---
O.onkeypress = function(ev){
   if(!ev) ev = event;
   var key = ev.keyCode; if(!key) key = ev.charCode;
   if(key==13 || key==27) G.EndEdit(row,col,key==13); // Finishes editing (13 Enter accepts changes, 27 esc rejects changes)
   if(key!=9) CancelEvent(ev,1); // Suppresses TreeGrid event handler
   if(!ev) ev = event;
   }

// --- Function to show the custom menu ---
function showmenu(){
   var val = O.value, M = [];
   if(val) for(var i=0;i<List.length;i++) if(List[i].indexOf(val)==0) M[M.length] = List[i];
   if(M.length) G.ShowMenu(row,col,M,null,setval,1,null,null,null,M);
   else G.CloseDialog(); // No item found, nothing shown
   }

// --- called after click to menu item to set the selected string ---
function setval(idx,G,row,col,M){
   if(M[idx]) { O.value = M[idx]; G.EndEdit(row,col,1); }
   }

return O; // Returns the input to get in OnCustomEndEdit
}


// --- API event called to finish editing ---
Grids.OnCustomEndEdit = function(G,row,col,save,O){
G.CloseDialog(); // Closes the custom menu
if(!save) return; 
return O.value; // Returns the value entered into input
}

      </script>
   </body>
</html>
